<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
	<title>Document</title>
	<style>
	    *{margin: 0;padding: 0;}
        #box{
            width: 70vw;height: 70vw;
            margin: 20px auto;
            position: relative;
            border-radius: 50%;

        }
        #canvas{
        	background: #ccc;
            width: 70vw;height: 70vw;
        	display: block;
            position: absolute;
            left: 0px;top: 0px;
            border-radius: 50%;

        }
        #choujiang{
            width: 14vw;height: 14vw;
            position: absolute;
            left: 28vw;top: 28vw;
            cursor: pointer;
            transition: 1s;
        }
        #choujiang:hover{
            transform: rotate(720deg);
        }
        #jt{
            width: 6vw;
            position: absolute;
            left: 32vw;
            top: 20vw;
        }
    </style>
</head>
<body>
<div id="box">
	<canvas id="canvas" width="500" height="500"></canvas>
    <img id="jt" src="images/jiantou.png" alt="" />   
    <img id="choujiang" src="images/choujiang.png" alt="" />
</div>
</body>
<script>
function dazhuanpan(){
    This = this;
	this.c = document.getElementById('canvas');
    this.obj = this.c.getContext("2d");
    this.choujiang = document.getElementById("choujiang");
    this.fen = 20;/*个数(一定要小于40)*/
    this.col = ["green","red"];
    /*奖品图片的路径*/
    this.url_arr = ["images/sj.jpg","images/jt.jpg","images/pg.jpg","images/qc.jpg","images/sj.jpg","images/jt.jpg","images/pg.jpg","images/qc.jpg","images/sj.jpg","images/jt.jpg","images/pg.jpg","images/qc.jpg","images/sj.jpg","images/jt.jpg","images/pg.jpg","images/qc.jpg","images/sj.jpg","images/jt.jpg","images/pg.jpg","images/qc.jpg","images/sj.jpg","images/jt.jpg","images/pg.jpg","images/qc.jpg","images/sj.jpg","images/jt.jpg","images/pg.jpg","images/qc.jpg","images/sj.jpg","images/jt.jpg","images/pg.jpg","images/qc.jpg","images/sj.jpg","images/jt.jpg","images/pg.jpg","images/qc.jpg","images/sj.jpg","images/jt.jpg","images/pg.jpg","images/qc.jpg"];
    this.gift = ["苹果手机","金条","苹果10000股","豪车","苹果手机","金条","苹果10000股","豪车","苹果手机","金条","苹果10000股","豪车","苹果手机","金条","苹果10000股","豪车","苹果手机","金条","苹果10000股","豪车","苹果手机","金条","苹果10000股","豪车","苹果手机","金条","苹果10000股","豪车","苹果手机","金条","苹果10000股","豪车","苹果手机","金条","苹果10000股","豪车","苹果手机","金条","苹果10000股","豪车","苹果手机","金条","苹果10000股","豪车"]
    /*主执行函数*/
    this.run=function(){
        This.shan(This.col[0],This.col[1]);
        This.tu(This.fen);
        This.yuanxin();
        This.chou(This.fen);
    }
    /*遍历出多个扇形*/
    this.shan=function(col1,col2){
        for(var i=0;i<This.fen;i++){
            /*隔块变色*/
            if(i%2==0){
                This.obj.fillStyle = col1;
            }else{
                This.obj.fillStyle = col2;
            }
            // 画扇形
            This.obj.beginPath();
            This.obj.moveTo(250,250);
            This.obj.arc(250,250,250,i*(-Math.PI*2/This.fen),(i+1)*(-Math.PI*2/This.fen),true);
            This.obj.closePath();
            This.obj.fill();
        }
    }
    // 遍历出多个图像
    this.tu=function(){
        // 创建多个图像对象并添加链接
        var obj_arr = [];
        for(var j=0;j<This.fen;j++){
            obj_arr[j] = new Image();
    		obj_arr[j].src = This.url_arr[j];
        }
        // 给每个图像对象设置位置
        window.onload = function(){
        	for(var j=0;j<This.fen;j++){
        		This.obj.save();
                // 设置图片的旋转基点
    	    	This.obj.translate(250,250);
                // 设置图片的旋转角度
                This.obj.rotate(transAngle(This.fen,j));
                // 设置元素的尺寸和位置
                var size = 80-2*This.fen;
                var left = -size/2;
                var top = -220;
                // 绘制图像
                This.obj.drawImage(obj_arr[j],left,top,size,size);
                This.obj.restore();
        	}
        }
    }  
    // 圆心部分
    this.yuanxin=function(){
        This.obj.beginPath();
        This.obj.arc(250,250,50,0,Math.PI*2,true);
        This.obj.fillStyle = "#ccc";
        This.obj.fill();
        This.obj.closePath();
    }
    // 点击旋转抽奖效果
    this.chou=function(fen){
        var click = 0;
        This.choujiang.onclick=function(){
            if(click==1){
                return;
            }
            click = 1;
            This.c.style.transition="";
            This.c.style.transform = "rotate(0deg)";  
            // 确定指向的位置
            var angle_one = 360/fen;
            var num = Math.ceil(Math.random()*fen);
            if((fen/2)%2==0){
                var angle = num*angle_one+3600+angle_one/2+"deg";
            }else{
                var angle = num*angle_one+3600+"deg";
            }
            // 执行旋转
            setTimeout(function(){
                This.c.style.transform = "rotate("+angle+")";
                This.c.style.transition="3s ease-out";
            },500);
            // 弹出奖品结果
            setTimeout(function(){
                alert(This.gift[num-1]);
                click = 0;
            },4000);
            
            // setTimeout(function(){
            //     click = 0;
            //     This.c.style.transition="";
            //     This.c.style.transform = "rotate(0deg)";  
            // },3100);
            // click=1;
        } 
    }
    // 计算图片的旋转角度的函数
    function transAngle(fen,num){
        // 每份所占的角度
        var angle_one = 360/fen;
        // 份数的一半是否能被2整除
        if((fen/2)%2==0){
            // 如果能被整除,那么图片的偏移量为角度的一半
            var angle_two = angle_one/2;
            var angle = 2*Math.PI*angle_one*num/360+2*Math.PI*angle_two/360;
        }else{
            // 如果不能被整除,那么图片的偏移量为0
            var angle_two = 0;
            var angle = 2*Math.PI*angle_one*num/360+2*Math.PI*angle_two/360;
        }
        return angle;
    }
}

var obj = new dazhuanpan();
obj.run();
  
</script>
</html>